<template>
  <div class="app-container">
    <!-- 考试创建表单 -->
    <el-form :model="form" :rules="formRules" ref="form" label-width="120px">
      <!-- 基本配置信息 -->
      <el-row :gutter="0">
        <el-col :span="20">
          <!-- 考试名称、研修班类型、研修班 -->
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item prop="examName" label="考试名称">
                <el-input placeholder="请输入当前创建的考试名称" v-model="form.examName" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="examClassType" label="报班类型">
                <el-radio v-model="form.examClassType" :label="1">线上</el-radio>
                <el-radio v-model="form.examClassType" :label="2">线下</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="signUpId" label="研修班">
                <el-select v-model="form.signUpId"
                           filterable remote reserve-keyword
                           placeholder="请选择考试所关联的研修班"
                           :remote-method="handleRemoteData" @change="handleSelectSignUp">
                  <el-option
                    v-for="item in responseData.signUpIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeLabel }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 研修班类型、开始时间、结束时间 -->
          <el-row :gutter="0">
            <el-col :span="8">
              <el-form-item prop="examType" label="考试类型">
                <el-radio v-model="form.examType" :label="1">正考</el-radio>
                <el-radio v-model="form.examType" :label="2">补考</el-radio>
                <el-radio v-model="form.examType" :label="3">加试</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="examStartTime" label="开始时间">
                <el-date-picker
                  v-model="form.examStartTime"
                  type="datetime"
                  placeholder="选择考试开始时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="examEndTime" label="结束时间">
                <el-date-picker
                  v-model="form.examEndTime"
                  type="datetime"
                  placeholder="选择考试结束时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 证书颁布时间、考试时长、考试方式、颁布方式 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="examScoreTime" label="颁布时间">
                <el-date-picker
                  v-model="form.examScoreTime"
                  type="datetime"
                  placeholder="选择考试颁布时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="examDurationTime" label="考试时长">
                <el-input placeholder="请输入当前考试的考试时长(秒)" v-model="form.examDurationTime" class="filter-item" auto-complete="off"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="examInfoType" label="考试方式">
                <el-radio v-model="form.examInfoType" :label="1">即时考试</el-radio>
                <el-radio v-model="form.examInfoType" :label="2">统一考试</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="examScoreType" label="发布方式">
                <el-radio v-model="form.examScoreType" :label="1">即时发布</el-radio>
                <el-radio v-model="form.examScoreType" :label="2">统一发布</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- 考试预览图 -->
        <el-col :span="4">
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item label="题目图">
                <el-upload
                  class="avatar-uploader"
                  action="/api/cms/common/uploadFile"
                  :show-file-list="false"
                  :on-success="handleExamNameImageUploadSuccess">
                  <img v-if="form.examNameImage" :src="form.examNameImage" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 试卷随堂小考数量预览 -->
      <el-row :gutter="20">
        <el-col :span="12" style="text-align: left !important; margin-bottom: 22px">
          <span style="margin-left: 50px; line-height: 40px">所有随堂小考题目：</span>
          <span>单选题数量<el-tag style="margin-left: 10px">{{responseData.signUpQuestionCount.radioCount}}</el-tag></span>
          <el-divider direction="vertical"></el-divider>
          <span>多选题数量<el-tag type="success" style="margin-left: 10px">{{responseData.signUpQuestionCount.selectCount}}</el-tag></span>
          <el-divider direction="vertical"></el-divider>
          <span>判断题数量<el-tag type="info" style="margin-left: 10px">{{responseData.signUpQuestionCount.judgeCount}}</el-tag></span>
        </el-col>
        <el-col :span="12" style="text-align: left !important; margin-bottom: 22px">
          <span style="margin-left: 50px; line-height: 40px">考试通过率：</span>
          <span>参与数量<el-tag style="margin-left: 10px">{{form.paperCount}}</el-tag></span>
          <el-divider direction="vertical"></el-divider>
          <span>通过数量<el-tag type="success" style="margin-left: 10px">{{form.successCount}}</el-tag></span>
          <el-divider direction="vertical"></el-divider>
          <span>失败数量<el-tag type="info" style="margin-left: 10px">{{form.failCount}}</el-tag></span>
          <el-divider direction="vertical"></el-divider>
          <span>考试通过率<el-tag type="info" style="margin-left: 10px">{{form.passingRate}}</el-tag></span>
        </el-col>
      </el-row>
      <!-- 卷面配置信息 -->
      <el-row :gutter="0">
        <el-col :span="4">
          <el-form-item prop="examQuestionCount" label="总题数">
            <el-input placeholder="请输入当前考试预设总题数" v-model="form.examQuestionCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="examFullScore" label="考试满分">
            <el-input placeholder="请输入当前考试试卷满分" v-model="form.examFullScore" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="examPassingScore" label="合格分数">
            <el-input placeholder="请输入当前考试试卷合格分数" v-model="form.examPassingScore" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="examStatus" label="审核状态">
            <el-radio v-model="form.examStatus" :label="0">预设</el-radio>
            <el-radio v-model="form.examStatus" :label="1">发布</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item prop="examShowIndex" label="展示顺序">
            <el-input placeholder="请输入当前创建的展示顺序" v-model="form.examShowIndex" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 题型配置信息 -->
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item prop="examRadioCount" label="单选考题">
            <el-input placeholder="请输入当前考试出现的非随堂小考单选题数量" v-model="form.examRadioCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examRadioCount" label="单选随堂小考">
            <el-input placeholder="请输入当前考试出现的随堂小考单选题数量" v-model="form.examRadioAnchorCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examRadioScore" label="单选题分值">
            <el-input placeholder="请输入当前考试单选题分值" v-model="form.examRadioScore" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item prop="examMultiSelectCount" label="多选考题">
            <el-input placeholder="请输入当前考试出现的非随堂小考多选题数量" v-model="form.examMultiSelectCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examMultiSelectCount" label="多选随堂小考">
            <el-input placeholder="请输入当前考试出现的随堂小考多选题数量" v-model="form.examMultiSelectAnchorCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examMultiSelectScore" label="多选题分值">
            <el-input placeholder="请输入当前考试多选题分值" v-model="form.examMultiSelectScore" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item prop="examJudgeCount" label="判断考题">
            <el-input placeholder="请输入当前考试出现的非随堂小考判断题数量" v-model="form.examJudgeCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examJudgeCount" label="判断随堂小考">
            <el-input placeholder="请输入当前考试出现的随堂小考判断题数量" v-model="form.examJudgeAnchorCount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="examJudgeScore" label="判断题分值">
            <el-input placeholder="请输入当前考试判断题分值" v-model="form.examJudgeScore" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 来源配置信息 -->
      <el-row :gutter="0">
        <el-col :span="4">
          <el-form-item prop="examRadioCount" label="地域">
            <el-select lass="filter-item" v-model="form.examTerritoryLabel" filterable placeholder="请选择">
              <el-option
                v-for="item in responseData.chinaList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="examAuthor" label="作者">
            <el-input placeholder="请输入当前考试作者" v-model="form.examAuthor" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item prop="examInfo" label="简介">
            <el-input placeholder="请输入当前考试简介" v-model="form.examInfo" class="filter-item" auto-complete="off" type="textarea" :rows="2"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 考前须知 -->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item prop="examInfo" label="考前须知">
            <el-input placeholder="请输入当前考前须知" v-model="form.examNotice" class="filter-item" auto-complete="off" type="textarea" :rows="6"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 题型说明 -->
      <el-row :gutter="0">
        <el-col :span="8" v-for="item in form.examExplain" :key="item.explainId">
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="explainName" label="按钮文字">
              <el-input placeholder="请输入当前题型介绍按钮展示文字" v-model="item.explainName" class="filter-item" auto-complete="off"/>
            </el-form-item>
          </el-col></el-row>
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="explainStatus" label="通过状态">
              <el-radio v-model="item.explainStatus" :label="0">不通过</el-radio>
              <el-radio v-model="item.explainStatus" :label="1">通过</el-radio>
            </el-form-item>
          </el-col></el-row>
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="examStatus" label="说明类型">
              <el-radio v-model="item.explainType" :label="1">单选</el-radio>
              <el-radio v-model="item.explainType" :label="2">多选</el-radio>
              <el-radio v-model="item.explainType" :label="3">判断</el-radio>
            </el-form-item>
          </el-col></el-row>
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="explainTitle" label="标题文字">
              <el-input placeholder="请输入题型说明标题文字" v-model="item.explainTitle" class="filter-item" auto-complete="off"/>
            </el-form-item>
          </el-col></el-row>
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="explainCount" label="数量文字">
              <el-input placeholder="请输入题型说明数量文字" v-model="item.explainCount" class="filter-item" auto-complete="off"/>
            </el-form-item>
          </el-col></el-row>
          <el-row :gutter="0"><el-col :span="24">
            <el-form-item prop="explainImage" label="展示图像">
              <el-upload
                class="avatar-uploader"
                action="/api/cms/common/uploadFile"
                :show-file-list="false"
                :on-success="handleExplainImageUploadSuccess">
                <img v-if="item.explainImage" :src="item.explainImage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 178px"></i>
              </el-upload>
            </el-form-item>
          </el-col></el-row>
        </el-col>
      </el-row>
      <!-- 抽题范围 -->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item label="范围设置">
            <el-row :gutter="0">
              <el-col :span="4">
                <el-form-item prop="examIsUseWarehouse" label="是否分库">
                  <el-switch
                    v-model="form.examIsUseWarehouse" :active-value="1" active-color="#13ce66" :inactive-value="0" inactive-color="#ff4949" @change="handleChooseExamIsUseWarehouse">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="examWarehouseId" label="匹配题库">
                  <el-select lass="filter-item" v-model="form.examWarehouseId" filterable placeholder="请选择" :disabled="form.examIsUseWarehouse === 0">
                    <el-option
                      v-for="item in responseData.examWarehouseList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="">
            <el-row :gutter="0">
              <el-col :span="6">
                <el-form-item prop="examEasyProportion" label="考点标签">
                  <el-cascader
                    v-model="form.examLabelList"
                    :options="responseData.examLabelList"
                    :props="{ multiple: true, checkStrictly: true }"
                    clearable filterable></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="examNationwideCode" label="全国标签">
                  <el-select v-model="form.examNationwideCode" placeholder="请选择">
                    <el-option v-for="item in pageData.examNationwideCodeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="examNationwideProportion" label="占比">
                  <el-input placeholder="匹配规则全国占比" v-model="form.examNationwideProportion" class="filter-item" auto-complete="off" type="number" step="0.01" max="1.00" min="0.00"/>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="examAreaCode" label="地区标签">
                  <el-select lass="filter-item" v-model="form.examAreaCode" filterable placeholder="请选择">
                    <el-option
                      v-for="item in responseData.chinaList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="examAreaProportion" label="占比">
                  <el-input placeholder="匹配规则地区占比" v-model="form.examAreaProportion" class="filter-item" auto-complete="off" type="number" step="0.01" max="1.00" min="0.00"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 考试难易度 -->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item label="难度设置">
            <el-row :gutter="0">
              <el-col :span="8">
                <el-form-item prop="examIsUseWarehouse" label="难易类型">
                  <el-radio v-model="form.examDifficultyType" :label="1">使用题目难易度匹配</el-radio>
                  <el-radio v-model="form.examDifficultyType" :label="2">使用考试通过率匹配</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="">
            <el-row :gutter="0">
              <el-col :span="8">
                <el-form-item prop="examEasyProportion" label="简单">
                  <el-input placeholder="匹配规则简单题型占比" v-model="form.examEasyProportion" class="filter-item" auto-complete="off"
                            type="number" step="0.01" max="1.00" min="0.00" :disabled="form.examDifficultyType == 2"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="examModerateProportion" label="中等">
                  <el-input placeholder="匹配规则中等题型占比" v-model="form.examModerateProportion" class="filter-item" auto-complete="off"
                            type="number" step="0.01" max="1.00" min="0.00" :disabled="form.examDifficultyType == 2"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="examDifficultyProportion" label="困难">
                  <el-input placeholder="匹配规则困难题型占比" v-model="form.examDifficultyProportion" class="filter-item" auto-complete="off"
                            type="number" step="0.01" max="1.00" min="0.00" :disabled="form.examDifficultyType == 2"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="">
            <el-row :gutter="0">
              <el-col :span="8">
                <el-form-item prop="examEasyProportion" label="通过率(低)">
                  <el-input placeholder="匹配规则简单题型占比" v-model="form.examQuestionCorrectRateLow" class="filter-item" auto-complete="off"
                            type="number" step="1" max="100" min="0" :disabled="form.examDifficultyType == 1"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="examModerateProportion" label="通过率(高)">
                  <el-input placeholder="匹配规则中等题型占比" v-model="form.examQuestionCorrectRateHigh" class="filter-item" auto-complete="off"
                            type="number" step="1" max="100" min="0" :disabled="form.examDifficultyType == 1"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 题目排序方式 -->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item label="排序设置">
            <el-row :gutter="0">
              <el-col :span="5">
                <el-form-item prop="examQuestionSortType" label="题目排序">
                  <el-radio v-model="form.examQuestionSortType" :label="0">乱序</el-radio>
                  <el-radio v-model="form.examQuestionSortType" :label="1">题型</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="examQuestionOptionSortType" label="选项排序">
                  <el-radio v-model="form.examQuestionOptionSortType" :label="0">默认</el-radio>
                  <el-radio v-model="form.examQuestionOptionSortType" :label="1">乱序</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保存按钮 -->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-button type="primary" @click="handleSimulateButtonClickEvent('form')">模拟匹配试卷</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 试卷预览隐藏域 -->
    <el-dialog :visible.sync="pageData.simulateStatus" size="small"
               :before-close="handleCloseSimulatePanel">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>匹配统计</span>
        </div>
        <div class="tag-group">
          <el-tag key="总数" type="primary" effect="dark" style="width: 50px">总数</el-tag>
          <el-tag key="单选" type="primary" effect="dark" style="width: 50px">单选</el-tag>
          <el-tag key="多选" type="primary" effect="dark" style="width: 50px">多选</el-tag>
          <el-tag key="判断" type="primary" effect="dark" style="width: 50px">判断</el-tag>
          <el-tag key="简单" type="primary" effect="dark" style="width: 50px">简单</el-tag>
          <el-tag key="中等" type="primary" effect="dark" style="width: 50px">中等</el-tag>
          <el-tag key="困难" type="primary" effect="dark" style="width: 50px">困难</el-tag>
          <el-tag key="全国" type="primary" effect="dark" style="width: 50px">全国</el-tag>
          <el-tag key="地区" type="primary" effect="dark" style="width: 50px">地区</el-tag>
          <el-tag key="随堂小考单选" type="primary" effect="dark" style="width: 100px">随堂小考单选</el-tag>
          <el-tag key="随堂小考多选" type="primary" effect="dark" style="width: 100px">随堂小考多选</el-tag>
          <el-tag key="随堂小考判断" type="primary" effect="dark" style="width: 100px">随堂小考判断</el-tag>
        </div>
        <div class="tag-group">
          <el-tag key="1"
                  :type="responseData.simulateList.questionAllCount === parseInt(form.examQuestionCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.questionAllCount }}</el-tag>
          <el-tag key="2"
                  :type="responseData.simulateList.radioAllCount === parseInt(form.examRadioCount)+parseInt(form.examRadioAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.radioAllCount }}</el-tag>
          <el-tag key="3"
                  :type="responseData.simulateList.selectAllCount === parseInt(form.examMultiSelectCount)+parseInt(form.examMultiSelectAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.selectAllCount }}</el-tag>
          <el-tag key="4"
                  :type="responseData.simulateList.judgeAllCount === parseInt(form.examJudgeCount)+parseInt(form.examJudgeAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.judgeAllCount }}</el-tag>
          <el-tag key="5"
                  type="info"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.easyAllCount }}</el-tag>
          <el-tag key="6"
                  type="info"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.moderateAllCount }}</el-tag>
          <el-tag key="7"
                  type="info"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.difficultyAllCount }}</el-tag>
          <el-tag key="8"
                  type="info"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.nationwideAllCount }}</el-tag>
          <el-tag key="9"
                  type="info"
                  effect="plain" style="width: 50px">{{ responseData.simulateList.areaAllCount }}</el-tag>
          <el-tag key="10"
                  :type="responseData.simulateList.anchorRadioAllCount === parseInt(form.examRadioAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 100px">{{ responseData.simulateList.anchorRadioAllCount }}</el-tag>
          <el-tag key="11"
                  :type="responseData.simulateList.anchorSelectAllCount === parseInt(form.examMultiSelectAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 100px">{{ responseData.simulateList.anchorSelectAllCount }}</el-tag>
          <el-tag key="12"
                  :type="responseData.simulateList.anchorJudgeAllCount === parseInt(form.examJudgeAnchorCount) ? 'success' : 'danger'"
                  effect="plain" style="width: 100px">{{ responseData.simulateList.anchorJudgeAllCount }}</el-tag>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>试卷预览</span>
        </div>
        <div style="overflow: auto; height: 320px">
          <el-table :data="responseData.simulateList.list"
                    border style="width: 100%;">
            <el-table-column prop="questionName" label="题目名称" width="180" align="center"/>
            <el-table-column prop="questionType" label="题目类型" width="180" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === 1"><el-tag type="success">单选</el-tag></span>
                <span v-if="scope.row.questionType === 2"><el-tag type="primary">多选</el-tag></span>
                <span v-if="scope.row.questionType === 3"><el-tag type="danger">判断</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="questionDifficultyType" label="难易度" width="120" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.questionDifficultyType === 1"><el-tag type="success">简单</el-tag></span>
                <span v-if="scope.row.questionDifficultyType === 2"><el-tag type="primary">中等</el-tag></span>
                <span v-if="scope.row.questionDifficultyType === 3"><el-tag type="danger">困难</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column prop="examQuestionWarehouse" label="所属题库" width="180" align="center"/>
            <el-table-column prop="questionTerritoryType" label="所属地区" width="180" align="center"/>
            <el-table-column prop="questionCorrectAnswer" label="正确答案" width="180" align="center"/>
          </el-table>
        </div>
      </el-card>
      <div style="margin-top: 20px">
        <el-button :disabled="
        (parseInt(responseData.simulateList.questionAllCount) !== parseInt(form.examQuestionCount)) ||
        (parseInt(responseData.simulateList.radioAllCount) !== parseInt(form.examRadioCount) + parseInt(form.examRadioAnchorCount)) ||
        (parseInt(responseData.simulateList.selectAllCount) !== parseInt(form.examMultiSelectCount) + parseInt(form.examMultiSelectAnchorCount)) ||
        (parseInt(responseData.simulateList.judgeAllCount) !== parseInt(form.examJudgeCount) + parseInt(form.examJudgeAnchorCount))"
                   type="primary" @click="handleSaveButtonClick('form')">保存考试</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 组件引入
import { displaceArray } from '@/utils/ArrayUtil';
// 方法工具引入
import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
import { getPermission } from '@/utils/UserCookies';
// 接口引入
import { loadCmsChinaList,loadCmsExamQuestionWarehouseLabelList,loadCmsExamLabelList,loadCmsExamExamSignUpList,loadCmsExamData,loadCmsExamSimulatePaperList,updateCmsExamData,loadCmsQuestionCountBySignUp } from "@/api/study";
export default {
  name: "edit",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      pageData:{
        examNationwideCodeList: [
          {label: "全国", value: "0"},
        ],
        simulateStatus: false
      },// 页面配置数据
      form:{
        examId: "",
        examName: "",
        examClassType: 2,
        signUpId: "",
        examType: 1,
        examInfoType: 1,
        examScoreType: 1,
        examStartTime: new Date(),
        examEndTime: new Date(),
        examScoreTime: new Date(),
        examDurationTime: 3600,
        examNameImage: "",
        examQuestionCount: 45,
        examFullScore: 100,
        examPassingScore: 60,
        examShowIndex: 0,
        examStatus: 1,
        examRadioCount: 20,
        examRadioAnchorCount: 0,
        examRadioScore: 2,
        examMultiSelectCount: 5,
        examMultiSelectAnchorCount: 0,
        examMultiSelectScore: 4,
        examJudgeCount: 20,
        examJudgeAnchorCount: 0,
        examJudgeScore: 2,
        examTerritoryLabel: "0",
        examAuthor: "",
        examInfo: "",
        examNotice: "1.考试之前，学员需在手机或电脑端（PC端）上登录易考通平台，并通过报名手机号完成注册，确认个人信息无误，确保可按时参与考试。\\n" +
          "2.考试前 30 分钟内，考生须登录“易考通在线考试云平台”（手机或电脑端均可），使用报名手机号登陆后，进入“参加考试”频道，点击相应“考试入口”，进入考试倒计时界面。\\n" +
          "3.考试时间开始后点击“开始考试”进行考试，超过考试有效期后不能参加当次考试。\\n" +
          "4.考试方式为闭卷考试。\\n" +
          "5.每场考试时间为 60 分钟，满分 100 分，合格分数线 60 分。考试时限内仅可作答一次。\\n" +
          "6.考试开始后自动计时，不会因退出、断网等情况中断计时，考生交卷或考试时间结束时，系统自动试卷并自动计算成绩，考生可当即获知本次考试成绩。考试结束后，考生可自行通过易考通在线考试云平台“成绩查询”频道查询个人考试情况。\\n" +
          "7.如遇系统问题，或考试过程中遇到系统问题不能正常考试的情形，可联系在线客服解决，涉及试题内容的疑问，不得向客服询问。\\n" +
          "8.考试过程中不得利用手机查阅资料，不得抄袭或有意让他人抄袭、不得替考等，平台技术人员会不定时抽查，如发现后将按作弊处理。\\n" +
          "9.如考生出现作弊行为，经审查确认后，本次考试成绩作废。如考生出现违反考试纪律的行为，取消其本次考试资格。\\n" +
          "10.在电脑端（PC端）考试的学员，请务必使用谷歌浏览器（Chrome浏览器）进行考试，使用其他浏览器将无法正常考试。\\n" +
          "11.考生通过“易考通在线考试云平台”-“参加考试”频道，点击“开始考试”即表示已同意上述规定并开始考试。",
        examExplain: [
          {
            explainId: "1",
            explainName: "单选题说明",
            explainType: 1,
            explainStatus: 1,
            explainTitle: "单选题，每题仅设1个正确答案，不选、多选或错选均不得分",
            explainCount: "本部分含20题，每题2分，共40分",
            explainImage: "http://v1.caigou2003.com/image/radio.png",
          },
          {
            explainId: "2",
            explainName: "多选题说明",
            explainType: 2,
            explainStatus: 1,
            explainTitle: "多选题，每题至少2个正确答案，不选、多选、少选或错选均不得分",
            explainCount: "本部分含5题，每题4分，共20分",
            explainImage: "http://v1.caigou2003.com/image/select.png",
          },
          {
            explainId: "3",
            explainName: "判断题说明",
            explainType: 3,
            explainStatus: 1,
            explainTitle: "判断题，判断题目内容的对、错",
            explainCount: "本部分含20题，每题2分，共40分",
            explainImage: "http://v1.caigou2003.com/image/judge.png",
          },
        ],
        examNationwideProportion: "0.00",
        examNationwideCode: "0",
        examAreaProportion: "0.00",
        examAreaCode: "0",
        examEasyProportion: "0.00",
        examModerateProportion: "0.00",
        examDifficultyProportion: "0.00",
        examLabelList: [],// 不参与表单
        examLabel: [],
        examIsUseWarehouse: 0,// 是否使用分库匹配
        examWarehouseId: 0,// 分库匹配的ID
        examQuestionSortType: 0,// 题目排序方式
        examQuestionOptionSortType: 0,// 选项排序方式
        examDifficultyType: 1,// 试卷难易度类型(1使用题目难易度匹配、2使用考试通过率匹配)
        examQuestionCorrectRateLow:0,// 通过率(低)
        examQuestionCorrectRateHigh:0,// 通过率(高)
        paperCount: 0,
        successCount: 0,
        failCount: 0,
        passingRate: 0
      },// 页面表单
      formRules: {
        examName: [{ required: true, validator:(rule, value, callback) => {
            if (value === ""){
              this.$message.warning("请输入当前创建的考试名称");
              callback(new Error("请输入当前创建的考试名称"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 标题
        signUpId: [{ required: true, validator:(rule, value, callback) => {
            if (value === ""){
              this.$message.warning("请选择考试所关联的研修班");
              callback(new Error("请选择考试所关联的研修班"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 研修班
        examDurationTime: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0){
              this.$message.warning("请输入正确的考试时长，单位为秒");
              callback(new Error("请输入正确的考试时长，单位为秒"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 考试时长
        examStartTime: [{ required: true, validator:(rule, value, callback) => {
            if (value === ""){
              this.$message.warning("请选择开始时间");
              callback(new Error("请选择开始时间"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 开始时间
        examEndTime: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0){
              this.$message.warning("请选择结束时间");
              callback(new Error("请选择结束时间"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 结束时间
        examScoreTime: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0){
              this.$message.warning("请选择发证时间");
              callback(new Error("请选择发证时间"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 发证时间
        examQuestionCount: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value)){
              this.$message.warning("请输入正确的总题数");
              callback(new Error("请输入正确的总题数"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 总题数
        examFullScore: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value)){
              this.$message.warning("请输入正确的试卷满分");
              callback(new Error("请输入正确的试卷满分"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 满分
        examPassingScore: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value) || parseInt(value) > parseInt(this.form.examFullScore)){
              this.$message.warning("请输入正确的合格分数");
              callback(new Error("请输入正确的合格分数"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 合格分数
        examRadioCount: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value)){
              this.$message.warning("请输入正确的单选题个数");
              callback(new Error("请输入正确的单选题个数"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 单选数量
        examRadioScore: [{ required: true, validator:(rule, value, callback) => {
            if (value == "" || (!/^([0-9]{1,}[.][0-9]*)$||^([0-9]{1,})$/.test(value)) || (value != 0.5 && !/^\d*$/.test(value))){// 非空判定
              this.$message.warning("请输入正确的单选题分值,仅支持整数分值或0.5分");
              callback(new Error("请输入正确的单选题分值,仅支持整数分值或0.5分"));
            } else {// 数字判定
              callback();
            }
          },trigger: "blur" }],// 单选分值
        examMultiSelectCount: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value)){
              this.$message.warning("请输入正确的多选题个数");
              callback(new Error("请输入正确的多选题个数"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 多选数量
        examMultiSelectScore: [{ required: true, validator:(rule, value, callback) => {
            if (value == "" || (!/^([0-9]{1,}[.][0-9]*)$||^([0-9]{1,})$/.test(value)) || (value != 0.5 && !/^\d*$/.test(value))){// 非空判定
              this.$message.warning("请输入正确的单选题分值,仅支持整数分值或0.5分");
              callback(new Error("请输入正确的单选题分值,仅支持整数分值或0.5分"));
            } else {// 数字判定
              callback();
            }
          },trigger: "blur" }],// 多选分值
        examJudgeCount: [{ required: true, validator:(rule, value, callback) => {
            if (value === "" || value <= 0 || !/^\d*$/.test(value)){
              this.$message.warning("请输入正确的判断题个数");
              callback(new Error("请输入正确的判断题个数"));
            } else {
              callback();
            }
          },trigger: "blur" }],// 判断个数
        examJudgeScore: [{ required: true, validator:(rule, value, callback) => {
            if (value == "" || (!/^([0-9]{1,}[.][0-9]*)$||^([0-9]{1,})$/.test(value)) || (value != 0.5 && !/^\d*$/.test(value))){// 非空判定
              this.$message.warning("请输入正确的单选题分值,仅支持整数分值或0.5分");
              callback(new Error("请输入正确的单选题分值,仅支持整数分值或0.5分"));
            } else {// 数字判定
              callback();
            }
          },trigger: "blur" }],// 判断分值
      },// 表单验证
      responseData: {
        signUpIdList:[],
        chinaList: [],
        examLabelList: [],
        simulateList: {},
        examWarehouseList: [
          {label: "默认使用无库匹配", value: "0"}
        ],
        signUpQuestionCount: {
          radioCount: 0,
          selectCount: 0,
          judgeCount: 0
        }
      },// 接口响应数据
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods:{
    // 事件函数
    handlePageInit(){
      let param = {examId: this.form.examId};
      this.loadCmsExamData(param);
    },// 页面初始化
    handleRemoteData(query){
      if (query !== "") {
        let param = {
          searchTitle: query,
          searchType: this.form.examClassType
        };
        this.loadCmsExamExamSignUpList(param);
      } else {
        this.responseData.signUpIdList = [];
      }
    },// 远程搜索可用研修班
    handleExamNameImageUploadSuccess(response){
      this.form.examNameImage = response.data;
    },// 题目图上传成功
    handleExplainImageUploadSuccess(){},// 题型说明图片上传成功
    handleSelectSignUp(){
      let param = {
        signUpId: this.form.signUpId
      };
      this.loadCmsQuestionCountBySignUp(param);
    },// 选择研修班事件(获取当前研修班下随堂小考数量)
    handleChooseExamIsUseWarehouse(){
      if (this.form.examIsUseWarehouse === 0){
        this.form.examWarehouseId = 0;
      }
    },// 切换是否使用分库
    handleSimulateButtonClickEvent(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 题目数量判定
          let allCount = this.form.examQuestionCount;// 预设题目总数量
          let radioCount = parseInt(this.form.examRadioCount) + parseInt(this.form.examRadioAnchorCount);// 单选数量
          let selectCount = parseInt(this.form.examMultiSelectCount) + parseInt(this.form.examMultiSelectAnchorCount);// 多选数量
          let judgeCount = parseInt(this.form.examJudgeCount) + parseInt(this.form.examJudgeAnchorCount);// 判断数量
          console.log("radioCount+selectCount+judgeCount",allCount,radioCount,selectCount,judgeCount);
          if ((parseInt(radioCount)+parseInt(selectCount)+parseInt(judgeCount)) !== parseInt(allCount)){
            this.$message.warning("题目配置数量异常，请检查配置项");
            return false;
          }
          // 分值判定
          let allScore = this.form.examFullScore;// 预设题目总数量
          let radioScore = parseInt(radioCount) * parseFloat(this.form.examRadioScore);// 单选数量
          let selectScore = parseInt(selectCount) * parseFloat(this.form.examMultiSelectScore);// 多选数量
          let judgeScore = parseInt(judgeCount) * parseFloat(this.form.examJudgeScore);// 判断数量
          if ((radioScore+selectScore+judgeScore) !== parseInt(allScore)){
            this.$message.warning("题目分值数量异常，请检查配置项");
            return false;
          }
          // 地区占比判定
          let nationwideProportion = this.form.examNationwideProportion;
          let areaProportion = this.form.examAreaProportion;
          console.log("(parseFloat(nationwideProportion)+parseFloat(areaProportion))", (parseFloat(nationwideProportion)+parseFloat(areaProportion)))
          if ((parseFloat(nationwideProportion)+parseFloat(areaProportion)).toFixed(2) != 1 && this.form.examLabelList.length === 0){
            this.$message.warning("未选择正确标签，请检查配置项");
            return false;
          }
          // 难易度占比判定
          let easyProportion = this.form.examEasyProportion;
          let moderateProportion = this.form.examModerateProportion;
          let difficultyProportion = this.form.examDifficultyProportion;
          if ((parseFloat(easyProportion)+parseFloat(moderateProportion)+parseFloat(difficultyProportion)).toFixed(2) != 1){
            this.$message.warning("难易度判定异常，请检查配置项");
            return false;
          }
          // 格式化考题标签信息
          let array = [];
          for (let i=0;i<this.form.examLabelList.length;i++){
            for (let j=0;j<this.form.examLabelList[i].length;j++){
              array.push(this.form.examLabelList[i][j]);
            }
          }
          // 数组去重
          array = array.filter(function(item,index){
            return array.indexOf(item,0) === index;
          });
          this.form.examLabel = array;
          this.loadCmsExamSimulatePaperList();
        } else {
          return false
        }
      })
    },// 模拟匹配试卷按钮点击事件
    handleCloseSimulatePanel(){
      this.$confirm("确认关闭？").then(response => {
        this.pageData.simulateStatus = false;
      }).catch(err => {
        console.log(err);
      });
    },// 关闭模拟匹配试卷提示
    handleSaveButtonClick(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证当前用户是否有增加数据的权限
          if (PermissionsToDetectFormUser(getPermission(), "620001")){
            this.$confirm('请仔细检查当前试卷的匹配结果', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.form.examStartTime !== ""){
                let date1 = new Date(this.form.examStartTime);
                this.form.examStartTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
              }
              if (this.form.examEndTime !== ""){
                let date1 = new Date(this.form.examEndTime);
                this.form.examEndTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
              }
              if (this.form.examScoreTime !== ""){
                let date1 = new Date(this.form.examScoreTime);
                this.form.examScoreTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
              }
              // 格式化考题标签信息
              let array = [];
              for (let i=0;i<this.form.examLabelList.length;i++){
                for (let j=0;j<this.form.examLabelList[i].length;j++){
                  array.push(this.form.examLabelList[i][j]);
                }
              }
              // 数组去重
              array = array.filter(function(item,index){
                return array.indexOf(item,0) === index;
              });
              this.form.examLabel = array;
              this.updateCmsExamData();
            }).catch((cancel) => {
              console.log(cancel);
              this.$message.info('已取消操作');
            });
          } else {
            this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
          }
        } else {
          return false;
        }
      });
    },// 保存按钮点击事件
    // 接口
    loadCmsChinaList(){
      loadCmsChinaList().then(response => {
        if (response.code === "200"){
          this.responseData.chinaList = response.data;
        } else {
          console.log(response.message);
          this.$message.warning(response.message);
        }
      }).catch(error =>{
        console.log(error);
        this.$message.error(error);
      });
    },// 获取地区字典列表
    loadCmsExamLabelList(){
      loadCmsExamLabelList().then(response => {
        if (response.code === "200"){
          this.responseData.examLabelList = response.data;
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 获取考点标签数据
    loadCmsExamQuestionWarehouseLabelList(){
      loadCmsExamQuestionWarehouseLabelList().then(response => {
        if (response.code === "200"){
          this.responseData.examWarehouseList = this.responseData.examWarehouseList.concat(response.data);
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 获取可用题库列表
    loadCmsExamExamSignUpList(param){
      loadCmsExamExamSignUpList(param).then(response => {
        if (response.code === "200"){
          this.responseData.signUpIdList = response.data;
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 获取可添加考试的研修班列表
    loadCmsQuestionCountBySignUp(param){
      loadCmsQuestionCountBySignUp(param).then(response => {
        if (response.code === "200"){
          this.$message.success("获取随堂小考数量成功");
          this.responseData.signUpQuestionCount = response.data;
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 获取当前研修班下随堂小考数量
    loadCmsExamData(param){
      loadCmsExamData(param).then(response => {
        if (response.code === "200"){
          this.form = response.data;
          // 处理标签数据
          let array = [];
          if (this.form.examLabel !== null && this.form.examLabel !== ''){
            let arrOld = this.form.examLabel.split(',');// 数据返回的数组
            array = displaceArray(arrOld);
          } else {
            array = [];
          }
          this.$set(this.form, "examLabelList", array);
          // 研修班处理
          this.form.signUpId = this.form.signUpId.toString();
          // 题目分库处理
          this.form.examWarehouseId = this.form.examWarehouseId.toString();
          // 分值处理
          if (this.form.examRadioScore == -1){
            this.form.examRadioScore = 0.5;
          }
          if (this.form.examMultiSelectScore == -1){
            this.form.examMultiSelectScore = 0.5;
          }
          if (this.form.examJudgeScore == -1){
            this.form.examJudgeScore = 0.5;
          }
          console.log("this.form",this.form);
          let param2 = {
            signUpId: this.form.signUpId
          };
          this.loadCmsQuestionCountBySignUp(param2);
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 获取考试修改页数据
    loadCmsExamSimulatePaperList(){
      loadCmsExamSimulatePaperList(this.form).then(response => {
        if (response.code === "200"){
          this.responseData.simulateList = response.data;
          this.pageData.simulateStatus = true;
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 模拟匹配试卷
    updateCmsExamData(){
      updateCmsExamData(this.form).then(response => {
        if (response.code === "200"){
          this.$message.success("考试修改成功");
          this.$jump.push({path: '/study/exam'});
        } else {
          this.$message.warning(response.message);
        }
      }).catch(error => {
        console.log(error);
        this.$message.error(error);
      })
    },// 保存试卷数据
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created: function () {
    let _this = this;
    _this.loadCmsChinaList();
    _this.loadCmsExamLabelList();
    _this.loadCmsExamQuestionWarehouseLabelList();
    // 延时初始化数据
    setTimeout(function () {
      _this.form.examId = _this.$route.query.examId;
      _this.handlePageInit();
    }, 800);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
